<template>
  <header>
    <!-- 头像 -->
    <aside></aside>
    <!-- 用户名 -->
    <p>{{username}}</p>
    <!-- 退出按钮 -->
    <button @click="logout()">【退出登录】</button>
  </header>
</template>

<script>
export default {
    name :'HomeHeader',
    data(){
        // 访问会话存储的登录账号
        let loginuser = sessionStorage.getItem('islogin');

        return{
            username : loginuser, //在页面渲染前，读取会话存储的数据并赋值
        }
    },
    methods : {
        logout(){
            // 清除sessionStorage
            sessionStorage.clear();
            // 跳转
            alert('已退出')
            this.$router.push('/logins');
        }
    }
}
</script>

<style scoped>
header{
    width: 100%;
    height: 78px;
    background-color: rgb(123, 197, 123);
    display: flex;
    align-items: center;
}
header aside{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: gray;
}
header p {
    margin-left:30px;
    margin-right: 15px;
    font-size: 14px;
    color: white;
    font-weight: 800;
}
header button {
    border:  none;
    background-color: unset;
    padding: 20px 10px;
    text-decoration: underline;
    border-radius: 5px;
    color: blue;
}
</style>